<template>
  <div class="patientDetail">
    <el-card class="top_nav" :shadow="shadowShow">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('add.add132')" name="first" />
        <el-tab-pane label="文件" name="second" />
      </el-tabs>
      <div v-if="activeName == 'first'">
        <div class="detail-list">
          <div class="d-item">
            <div>{{ $t('add.add210') }}</div>
            <div>{{ form.name }}</div>
          </div>
          <div class="d-item">
            <div>{{ $t('personOriginationInfo.xinxi9') }}</div>
            <div>
              {{ form.organizedType == 1 ? $t('add.add208') : $t('add.add209') }}
            </div>
          </div>
          <div class="d-item">
            <div>总容量</div>
            <div>{{ form.capacityTotal }}</div>
          </div>
          <div class="d-item">
            <div>剩余容量</div>
            <div>{{ form.capacityRemainStr }}</div>
          </div>
          <div class="d-item">
            <div>图示</div>
            <el-progress
              color="#409eff"
              :text-inside="true"
              :stroke-width="16"
              :percentage="((form.capacityUsed / form.capacityTotal) * 100).toFixed(2)"
            />
          </div>
          <div class="d-item">
            <div>{{ $t('add.add134') }}</div>
            <div>{{ form.createDate }}</div>
          </div>
        </div>
      </div>
      <div v-if="activeName == 'second'">
        <div class="wj-list">
          <div v-for="(item, index) in fileList" :key="index" class="wj-item">
            <div class="left">
              <div style="font-size: 26px; color: #358ff0">
                <i class="el-icon-document"></i>
              </div>
              <span class="name">{{ item.fileName }}</span>
              <span class="kb">{{ item.fileSize }}</span>
            </div>
            <div class="right">
              <span class="time">{{ item.createDate }}</span>
              <div
                style="color: #358ff0; margin-left: 130px; margin-right: 50px; cursor: pointer"
                @click="downLoad(item.url)"
              >
                <i class="el-icon-download"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="fanhu-btn">
      <el-button plain :size="optionButtonSize" @click="children">返回列表</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZsDetail',

  data() {
    return {
      form: {},
      activeName: 'first',
      fileList: [],
    };
  },

  mounted() {},

  methods: {
    getFileList() {
      this.$http
        .post(`/orderDownload/list?deptId=${this.form.id}&fileType=1`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.fileList = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    downLoad(url) {
      window.location.href = url;
    },
    handleClick(tab) {
   
      if (tab.name == 'second') {
  
        this.getFileList();
      }
    },
    children() {
      this.$emit('children');
    },
  },
};
</script>

<style lang="scss" scoped>
.patientDetail {
  position: relative;

  .detail-list {
    .d-item {
      display: flex;

      div {
        width: 230px;
        margin-bottom: 8px;
      }

      div:first-child {
        font-weight: 500;
      }
    }
  }

  .wj-list {
    .wj-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 26px;

      .left {
        display: flex;
        align-items: center;

        .name {
          margin-left: 10px;
          margin-right: 26px;
          font-weight: 500;
        }

        .kb {
          color: #4291f0;
        }
      }

      .right {
        display: flex;
        align-items: center;
      }
    }
  }

  .fanhu-btn {
    position: absolute;
    right: 30px;
    top: 20px;
  }
}

.dialog-footer {
  float: right;
}
</style>
